<template>
  <div class="leftThree">
    <div>
      <moduleTitle :name="title"></moduleTitle>
    </div>
    <div class="two">
      <div class="radar-title">
        <img src="@/assets/newDashboard/L3bg.png" class="radar-img" alt="" />
        <div class="radar-box">
          <div class="compont">
            <div class="c-box">
              <div class="num">5</div>
              <div class="type">大类</div>
            </div>
          </div>
          <div class="dashed"></div>
          <div class="compont">
            <div class="c-box">
              <div class="num">{{ fiveValue }}</div>
              <div class="type">条</div>
            </div>
          </div>
        </div>
      </div>
      <div class="radar-bigbox">
        <div id="radar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getByType } from '@/api/index/index'

import moduleTitle from '@/components/moduleTitle'
import Cookies from 'js-cookie'
import { getdevploment } from "@/api/newDashboard/index"
export default {
  name: 'SdssJddsZhgjWebLeftThree',
  components: {
    moduleTitle
  },
  data() {
    return {
      title: '数据质检',
      fiveValue: '',
      num: '',
      myChart: null,
      time: null
    }
  },
  mounted() {
    this.time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        this.fun()
        this.createRadar()
        window.addEventListener('resize', () => {
          this.myChart.resize() // 窗口发生改变就更新echarts
        })
      }
    }, 1000)
  },
  beforeDestroy() {
    this.myChart.dispose()
    window.removeEventListener('resize', this.myChart)
  },

  methods: {
    fun() {
      getdevploment().then(res => {
        if (res.data.code == 0) {

          this.fiveValue = res.data.data.qualityCheckCount

        }
      })
    },

    createRadar() {
      getByType().then((res) => {
        if (res.data.code == 200) {
          let nameArr = [
            { name: '自定义规则' },
            { name: '唯一性' },
            { name: '一致性' },
            { name: '完整性' },
            { name: '有效性' }
          ]
          let arr = []
          this.dictList('rule_classify').forEach((item) => {
            res.data.data.forEach((it) => {
              if (item.value == it.ruleType) {
                let obj = {
                  name: item.label,
                  value: it.errCoun
                }
                arr.push(obj)
                console.log(arr)
              }
            })
          })
          arr.forEach((item) => {
            nameArr.forEach((it) => {
              if (item.name == it.name) {
                it.value = item.value
              }
            })
          })
          let valueArr = []
          nameArr.forEach((item) => {
            if (item.value) {
              valueArr.push(item.value)
            } else {
              valueArr.push(0)
            }
          })

          clearInterval(this.time)
          this.myChart = this.$echarts.init(document.getElementById('radar'))
          var LeiData = valueArr
          let option
          option = {
            radar: {
              nameGap: 5, // 图中工艺等字距离图的距离
              splitNumber: 1, //指示器轴的分割段数
              name: {
                textStyle: {
                  color: '#FFFFFF',
                  fontSize: 14,
                  fontWeight: 400
                }
              },
              indicator: nameArr,
              axisLine: {
                //指向外圈文本的分隔线样式
                lineStyle: {
                  color: '#56FFC5',
                  type: 'dotted'
                },
                show: true
              },
              splitLine: {
                lineStyle: {
                  color: '#56FFC5'
                  // width: 2,
                },
                show: true
              },
              splitArea: {
                areaStyle: {
                  color: 'rgba(86, 255, 197, 0.1)'
                }
              }
            },
            grid: {
              top: '18%',
              left: '3%',
              right: '4%',
              bottom: '6%',
              containLabel: true
            },
            series: [
              {
                name: ' ',
                type: 'radar',
                symbol: 'circle',
                symbolSize: 1 * this.num,
                data: [
                  {
                    value: LeiData,
                    name: '',
                    lineStyle: {
                      width: 2 * this.num,
                      color: '#56FFC5' // 雷达图的线条
                    },
                    areaStyle: {
                      color: 'rgba(86, 255, 197, 0.2)' // 雷达图的区块背景
                    },
                    itemStyle: {
                      normal: {
                        color: '#0b60c0' // 雷达图的圆点
                      }
                    }
                  }
                ]
              }
            ]
          }
          option && this.myChart.setOption(option)
          // this.myChart.resize()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.leftThree {
  width: 100%;
  height: 40%;
  // background-color: purple;
}

.two {
  height: 100%;
  width: 100%;
  // padding: 0 calc(var(--num)*32px);
  // height: calc(var(--num)*220px);
  box-sizing: border-box;
}

.radar-title {
  width: 20.1563vw;
  height: 4.6296vh;
  margin: 0.9375vw auto;
  position: relative;
}

.radar-img {
  height: 100%;
  width: 100%;
}

.radar-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.dashed {
  position: absolute;
  left: 36%;
  top: 50%;
  width: 20%;
  height: 0.1852vh;
  border-top: 0.1042vw dashed #ffffff;
}

.compont {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-box {
  display: flex;
  align-items: center;
}

.num {
  font-size: 1.0417vw;
  color: #ffffff;
  font-weight: 600;
  font-family: SourceHanSansCN-Bold;
}

.type {
  font-size: 0.7292vw;
  color: #ffffff;
  font-family: SourceHanSansCN-Regular;
  margin-left: 0.4167vw;
}

.radar-bigbox {
  width: 100%;
  height: 17.5926vh;
}

#radar {
  width: 100%;
  height: 100% !important;
}
</style>
